<template>
  <div class="_wz_cent_main _wz_tryingStudy">
    <Card :bordered="true" style="margin:0 0 10px;">
      <p slot="title">隐患项</p>
      <div class="_wz_releaseDeptList_cent1">
        计划名称：<span>{{ !!selectDataParent.name ? selectDataParent.name : '--' }}</span>
        排查类型：<span>{{ !!selectDataParent.inspectTypeName ? selectDataParent.inspectTypeName : '--' }}</span>
        时间范围：<span>{{selectDataParent.startDate}} - {{selectDataParent.endDate}}</span>
      </div>
    </Card>
    <Card :bordered="true" style="height: 100%;overflow: hidden;">
      <p slot="title">列表</p>
      <p slot="extra">
        <Button type="primary" @click="addTableData">添加</Button>
      </p>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>

    <Modal :title="formTitle" v-model="formOperation" width="600" :mask-closable="false" :footer-hide="true" >
      <div v-if="formOperation" style="padding: 0 0 53px 0;">
        <Form label-position="right" :label-width="100" ref="formAdd" :model="selectData" :rules="ruleValidate">
          <FormItem label="排查点" prop="riskPositionUuid">
            <i-select v-model="selectData.riskPositionUuid" filterable placeholder="请选择排查点" clearable :label-in-value="true" @on-change="riskPositionNameFun">
              <Option :value="item.uuid" :key="item.uuid" v-for="item in riskPositionList">{{ item.riskPositionName }}</Option>
            </i-select>
          </FormItem>

          <FormItem label="指派模式" prop="riskInspectModelType">
            <i-select v-model.number="selectData.riskInspectModelType" filterable placeholder="请选择指派模式" clearable>
              <Option :value="1">指定排查</Option>
              <Option :value="2">非指定排查</Option>
            </i-select>
          </FormItem>
          <FormItem>
            <span style="color: #2d8cf0;">指派模式定人进行排查工作；<br/>非指派模式下，人员可通过车牌号搜索，进行排查任务、隐患上报</span>
          </FormItem>

          <FormItem label="排查人员" prop="wzRiskInspectUserUuids" v-if="selectData.riskInspectModelType == 1">
            <i-select v-model="selectData.wzRiskInspectUserUuids" filterable placeholder="请选择排查人员" clearable multiple>
              <Option :value="item.uuid" :key="item.uuid" v-for="item in systemUserList">{{ item.name }}</Option>
            </i-select>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer" v-if="formOperation">
          <Button style="margin-right: 8px" @click="formOperation = false">取消</Button>
          <Button type="primary" @click="authSubmit('formAdd')">提交</Button>
        </div>
      </div>
    </Modal>


    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
import wzTbale from "../../components/table/table";

export default {
  props: ["selectDataParent"],
  components: {
    wzTbale,//列表
  },
  data: function () {
    return {
      riskPositionList:[],//排查点
      spinShow: false,//本页加载
      ruleValidate: {
        riskPositionUuid: [
          {required: true, message: '请选择排查点', trigger: 'blur'},
        ],
        riskInspectModelType: [
          {type:'number',required: true, message: '请选择指派模式', trigger: 'blur'},
        ],
        wzRiskInspectUserUuids: [
          {type:'array',required: true, message: '请选择排查人员', trigger: 'blur'},
        ],
      },
      selectData: {},
      formTitle: "",
      formOperation: false,//表单左侧移出
      formOperationStyles: {//表单左侧移出css
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        padding: '10px',
        position: 'static'
      },
      tableData: {
        url: this.apiUrl.webApi + "/safety/risk/riskPlanPositionsPageList",//请求地址
        method: 'post',//请求方式
        where: {planUuid: this.selectDataParent.uuid},//搜索条件
        height: '100%',//表格高度 auto
        page: true,//分页是否使用
        width: 100,
        columns: [//表头数据
          {type: 'index', width: 80, align: 'center', title: '序号'},
          {title: '排查点', width: 140, key: 'riskPositionName'},
          {title: '排查人员',minWidth: 120,  key: 'riskInspectUserNames'},
          {
            title: '操作', fixed: 'right', width: 120,
            render: (h, params) => {
              var operationButtons = [];

              operationButtons.push(
                h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      this.formTitle = "修改"
                      this.selectData = JSON.parse(JSON.stringify(params.row));

                      this.systemUserListFun(this.selectData);
                      this.selectData.wzRiskInspectUserUuids = !!this.selectData.riskInspectUserUuids?this.selectData.riskInspectUserUuids.split(','):[]//人员
                      this.formOperation = true;
                    }
                  }
                }, "修改")
              )
              operationButtons.push(h('Divider', {props: {type: 'vertical',}}, ''))
              operationButtons.push(
                h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      let that = this;
                      that.$Modal.confirm({
                        title: '删除提醒',
                        content: '确定要删除选中的数据？',
                        onOk: () => {
                          that.axios.post(that.apiUrl.webApi + "/safety/risk/riskPlanPositionsDelete", {uuid: params.row.uuid}).then(res => {
                            if (!!res) {
                              that.$Message.success('删除成功');
                              that.$refs.wzTbale.tableLoadData();
                            }
                          }).catch(err => {
                            console.log('失败', err);
                          })
                        },
                        onCancel: () => {
                        }
                      });
                    }
                  }
                }, "删除")
              )
              return operationButtons;
            }
          },
        ],
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
      },
      systemUserList:[],//人员
    }
  },
  beforeCreate() {//beforeCreate创建前状态
  },
  created() {//created创建完毕状态
  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程
  },
  mounted() {//mounted 挂载结束状态
    var that = this;

    // that.axios.post(that.apiUrl.webApi + "/safety/risk/riskPositionList", {}).then(res => {
    //   if (!!res) {
    //     that.riskPositionList = res.data.data;
    //   }
    // }).catch(err => {
    //   console.log('失败', err);
    // })


    this.systemUserListFun(this.selectDataParent);

  },
  methods: {//执行的方法
    riskPositionNameFun(data){
      let that = this;
      if(!!data){//有数据
        that.selectData.riskPositionName = data.label;
        var obj = {};
        that.riskPositionList.forEach(function (k, i) {
          if(k.uuid == data.value){
            obj = k;
          }
        })
        that.selectData.deptName = obj.deptName;
        that.selectData.deptUuid = obj.deptUuid;
        // that.systemUserListFun(obj.deptName);
      }else{
        that.systemUserList = [];
        that.selectData.riskPositionName = '';
      }
    },
    systemUserListFun(data){
      let that = this;

      //排查点
      that.axios.post(that.apiUrl.webApi + "/safety/risk/riskPositionList", {deptUuid:data.deptUuid}).then(res => {
        if (!!res) {
          that.riskPositionList = res.data.data;
        }
      }).catch(err => {
        console.log('失败', err);
      })


      //人员list
      that.axios.post(that.apiUrl.systemUserSystemUserList,{deptName:data.deptName}).then(res => {
        if (!!res) {
          that.systemUserList = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    //添加
    addTableData() {
      let that = this;
      that.formTitle = "添加";
      that.selectData = {riskInspectModelType:1}
      that.formOperation = true;
    },
    authSubmit(name) {
      var that = this;

      that.$refs[name].validate((valid) => {
        if (valid) {//正则判断使用


          that.selectData.planUuid = that.selectDataParent.uuid;//排查计划id
          that.selectData.planName = that.selectDataParent.name;//排查计划名称


          if(that.selectData.riskInspectModelType == 1){
            that.selectData.riskInspectUserNames = that.public.extractName(that.systemUserList, that.selectData.wzRiskInspectUserUuids, {
              uniqueValue: 'uuid',
              name: 'name',
            }).name.join(',')//人员名称
            that.selectData.riskInspectUserUuids = that.selectData.wzRiskInspectUserUuids.join(',')//人员
          }else{
            delete that.selectData.riskInspectUserNames
            delete that.selectData.riskInspectUserUuids
          }



          that.$Spin.show();
          that.axios.post(that.apiUrl.webApi + "/safety/risk/riskPlanPositionsSaveOrUpdate", that.selectData).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$refs.wzTbale.tableLoadData()
              that.$Message.success('保存成功')
              that.formOperation = false;
              that.selectData = {}
            }
          }).catch(err => {
            console.log("失败", err)
          })

        } else {
          this.$Message.error('请正确填写表单');
        }
      })

    },
  },
  watch: {//监听
  },
  beforeUpdate() {//beforeUpdate 更新前状态
  },
  updated() {//updated 更新完成状态
  },
  beforeDestroy() {//beforeDestroy 销毁前状态
  },
  destroyed() {//destroyed 销毁完成状态
  }
}
</script>


<style lang="less">
._wz_tryingStudy {
  //不固定头部  列表到底
  display: flex;
  flex-direction: column;
  height: 100%;

  .ivu-card-body {
    height: calc(100% - 51px);
  }

  ._wz_materialExamName {
    cursor: pointer;
    color: #2d8cf0;
  }

  ._wz_car_viewData {
    ._wz_car_viewData_img {
      width: 160px;
    }


    .ivu-select-input {
      height: 30px;
      padding: 0 8px 0 8px;
    }

    .ivu-select-disabled .ivu-select-selection .ivu-select-arrow {
      display: none;
    }
  }


  ._wz_releaseDeptList_cent1 {
    span {
      margin: 0 10px 0 0;
      color: #01AAED;
    }
  }
}

</style>


